<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <title>COOL</title>
  <link rel="stylesheet" href="base.css">
  <link rel="stylesheet" href="common.css">
  <link rel="stylesheet" href="index.css">
</head>
<body>
<!-- 快捷导航 -->
<div class="pr-fa">
  <button class="prev"><</button>
</div>
<!-- next下一个 -->
<div class="ne-fa">
  <button class="next">＞</button>
</div>
<div class="header-top">
  <div class="first"><i class="avatar-1"></i></div>
  <div class="mi">
    <input type="search" placeholder="户外商品">
    <ul class="result-list">
      <li><a href="#">全部商品</a></li>
      <li><a href="#">野营</a></li>
      <li><a href="#">帐篷</a></li>
      <li><a href="#">钓鱼</a></li>
      <li><a href="#">小米手机</a></li>
      <li><a href="#">DIV食材</a></li>
      <li><a href="#">空调</a></li>
    </ul>
  </div>
  <div class="countdown">
    <p class="title">抢购倒计时</p>
  </div>
  <div class="timer">
      <p class="clock">
        <span id="hour">00小时</span>
        <i>:</i>
        <span id="minutes">25分</span>
        <i>:</i>
        <span id="second">20秒</span>
      </p>
  </div>
</div>
<div class="shortcut">
  <div class="wrapper">
    <i class="avatar"></i>
    <ul>
      <li><a href="登录login.html" id="top">您好！请先登录</a></li>
      <li><a href="注册导航.html">免费注册</a></li>
      <li><a href="index.html">主页</a></li>
      <li><a href="ShopCar.html">购物车</a></li>
      <li><a href="收货中心.html">收货中心</a></li>
      <li><a href="homePage.html">个人中心</a></li>
      <li><a href="视觉介绍.html"><span></span>官网</a></li>
    </ul>
  </div>
</div>
<div class="header wrapper" id="header-pic">
  <div class="logo">
    <h1><a href="#">企业图片</a></h1>
  </div>
  <div class="nav">
    <ul>
      <li> <a href="#">首页</a> </li>
      <li> <a href="more_goods.html">电子产品</a> </li>
      <li> <a href="more_goods.html">美妆</a> </li>
      <li> <a href="more_goods.html">服装和鞋帽</a> </li>
      <li> <a href="more_goods.html">珠宝和首饰</a> </li>
      <li> <a href="more_goods.html">服务中心</a> </li>
    </ul>
  </div>
  <div class="search">
    <input type="text" placeholder="手办" style="border-radius: 50%">
  </div>
  <div class="car">
    <a href="#"><img src="img/R-C.png" class="car-pic" href="#"></a>
  </div>
</div>

<!-- banner -->
<div class="banner">
  <div class="wrapper">
    <!-- 有多少个图，就有多少个li -->
    <ul>
      <li><a id="lunbo"><img src="img/轮播图5.jpg" alt="" style="transition: margin-left 2s"></a></li>
    </ul>
    <!-- 侧导航 -->
    <div class="aside">
      <ul>
        <li><a href="">手机 电脑<span>平板 相机</span></a></li>
        <li><a href="">单车 滑板<span>滑雪板 露营用品</span></a></li>
        <li><a href="">动漫 手办<span>电影 游戏</span></a></li>
        <li><a href="">衣服 鞋子<span>包包 美妆</span></a></li>
        <li><a href="">珠宝 首饰<span>项链 手链</span></a></li>
        <li><a href="">家具 用品<span>沙发 桌子</span></a></li>
        <li><a href="">宠物 用品<span>狗粮 猫粮</span></a></li>
        <li><a href="">医疗 保健<span>口罩 轮椅</span></a></li>
        <li><a href="">杂货 实用<span>户外 图书</span></a></li>
        <li><a href="">书籍 乐器<span>品牌 制透</span></a></li>
      </ul>
    </div>

    <!-- 箭头 -->
    <!-- prev上一个 -->

    <!-- 园点 ：当前状态：current/active-->
    <!-- js 找到用户点击的li 添加类名 li变白色的 -->
    <ol>
      <li class="current"></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ol>
  </div>
</div>
<div class="ele-fa">
  <ul class="ele">
    <li><a href="#" id="pop">人气推荐</a></li>
    <li><a href="#" id="brand">热门品牌</a></li>
    <li><a href="#" id="topic">最新专题</a></li>
    <li><a href="#" id="backtop">顶部</a></li>
  </ul>
</div>

<div class="background">

</div>



<!-- 人气推荐 -->
<div class="recommend wrapper">
  <div class="hd wrapper">
    <h2>人气推荐<span>人气爆款 不容错过 </span>
    </h2>
    <a class="more_goods" href="more_goods.html" style="font-size: 20px;margin-left: 850px;margin-top: 10px;height: 70px">更多商品</a>
  </div>
  <div class="bd clearfix">
    <ul>
      <li>
        <a href="商品页面.html">
          <img src="img/nike鞋.png" alt="">
          <h3>特惠推荐</h3>
          <div><span>我猜得到你的需要</span></div>
        </a>

      </li>

      <li>
        <a href="#">
          <img src="img/nike鞋2.png" alt="">
          <h3>爆款推荐</h3>
          <div><span>人气好物推荐</span></div>
        </a>
      </li>

      <li>
        <a href="#">
          <img src="img/nike鞋3.png" alt="">
          <h3>场景使用一站买全</h3>
          <div><span>编辑精心整理</span></div>
        </a>
      </li>

      <li>
        <a href="#">
          <img src="img/nike3.png" alt="">
          <h3>领券中心</h3>
          <div><span>发现更多超值优惠券</span></div>
        </a>
      </li>
    </ul>
  </div>
</div>

<!-- 热门品牌 -->
<div class="hot wrapper">
  <div class="hd wrapper">
    <h2>热门品牌<span>国际经典 品质保证</span></h2>
    <a href="#"></a>
  </div>

  <div class="bd clearfix">
    <ul>
      <li>
        <a href="#">
          <img src="img/pc_img_07-3.png" alt="">
          <h3>定制化服务</h3>
        </a>
      </li>
      <li>
        <a href="#">

          <img src="img/pc_img_07-2.png" alt="">
          <h3>独特配方</h3>
        </a>
      </li>
      <li>
        <a href="#">

          <img src="img/pc_img_09-1.png" alt="">
          <h3>国家安全标准</h3>
        </a>
      </li>
      <li>
        <a href="#">
          <img src="img/pc_img_09-4.png" alt="">
          <h3>价格实惠</h3>
        </a>
      </li>

      <li>
        <a href="#">
          <img src="img/pc_img_11-4.png" alt="">
          <h3>成分纯天然</h3>
        </a>
      </li>

    </ul>
  </div>
</div>

<div class="shengxian wrapper">
  <div class="hd wrapper">
    <h2>最新专题</h2>
    <a href="评论区.html" class="more">查看全部评论</a>
    <ul>
      <li><a href="#">自行车</a></li>
      <li><a href="#">零食</a></li>
      <li><a href="#">游戏</a></li>
      <li><a href="#">裤装</a></li>
      <li><a href="#">衬衫</a></li>
      <li><a href="#">T恤</a></li>
      <li><a href="#">短裤</a></li>
    </ul>
  </div>
  <div class="bd clearfix">
    <div class="left">
      <a href="#">
        <img src="img/评论区.jpg" alt="" height="350">
        <h1>用户的体验</h1>
      </a>
    </div>

    <div class="right">
      <ul>
        <li>
          <a href="#"><img src="img/nike3.png" alt="" height="210"></a>
        </li>
        <li>
          <a href="#"><img src="img/nike2.png" alt="" height="210"></a>
        </li>
        <li><a href="#"><img src="img/nike1.png" alt="" height="210"></a></li>
        <li><a><img src="img/nike鞋2.png" height="210"></a></li>
        <li><textarea   placeholder="***用户的评论:
这双鞋子真是太棒了！它的设计非常时尚，而且非常舒适。我可以穿着它长时间行走，不会感到疲惫。它采用了优质的材料，非常耐穿，即使经过长时间的使用，也不会出现明显的磨损。此外，它的鞋底非常柔软，能够缓解我的脚步冲击力，让我的脚部得到更好的保护。最重要的是，这双鞋子非常适合我的脚型，让我感到非常舒适，甚至在一整天的活动之后，我的脚依然感觉非常好。总之，我非常喜欢这双鞋子，它为我的生活增添了很多乐趣和便利"></textarea></li>
        <li><textarea placeholder="***用户的评论:
这双鞋子真是太棒了！它的设计非常时尚，而且非常舒适。我可以穿着它长时间行走，不会感到疲惫。它采用了优质的材料，非常耐穿，即使经过长时间的使用，也不会出现明显的磨损。此外，它的鞋底非常柔软，能够缓解我的脚步冲击力，让我的脚部得到更好的保护。最重要的是，这双鞋子非常适合我的脚型，让我感到非常舒适，甚至在一整天的活动之后，我的脚依然感觉非常好。总之，我非常喜欢这双鞋子，它为我的生活增添了很多乐趣和便利"></textarea></li>
        <li><textarea placeholder="***用户的评论:
这双鞋子真是太棒了！它的设计非常时尚，而且非常舒适。我可以穿着它长时间行走，不会感到疲惫。它采用了优质的材料，非常耐穿，即使经过长时间的使用，也不会出现明显的磨损。此外，它的鞋底非常柔软，能够缓解我的脚步冲击力，让我的脚部得到更好的保护。最重要的是，这双鞋子非常适合我的脚型，让我感到非常舒适，甚至在一整天的活动之后，我的脚依然感觉非常好。总之，我非常喜欢这双鞋子，它为我的生活增添了很多乐趣和便利"></textarea></li>
        <li><textarea placeholder="***用户的评论:
这双鞋子真是太棒了！它的设计非常时尚，而且非常舒适。我可以穿着它长时间行走，不会感到疲惫。它采用了优质的材料，非常耐穿，即使经过长时间的使用，也不会出现明显的磨损。此外，它的鞋底非常柔软，能够缓解我的脚步冲击力，让我的脚部得到更好的保护。最重要的是，这双鞋子非常适合我的脚型，让我感到非常舒适，甚至在一整天的活动之后，我的脚依然感觉非常好。总之，我非常喜欢这双鞋子，它为我的生活增添了很多乐趣和便利。"></textarea></li>
      </ul>
    </div>
  </div>
</div>
<div class="footer ">
  <div class="wrapper">
    <div class="top">
      <ul>
        <li>
          <span>快乐购物</span>
        </li>
        <li>
          <span>分享乐趣</span>
        </li>
        <li>
          <span>收获折扣</span>
        </li>
      </ul>
    </div>
    <div class="bottom">
      <p>
        <a href="#">关于我们</a> |
        <a href="#">关于我们</a> |
        <a href="#">关于我们</a> |
        <a href="#">关于我们</a> |
        <a href="#">关于我们</a> |
        <a href="#">关于我们</a> |
        <a href="#">关于我们</a>
      </p>
      <p>CMY @ </p>
    </div>
  </div>
</div>
<script>
  const pop=document.querySelector('.ele-fa li #pop')
  const brand=document.querySelector('.ele-fa li #brand')
  const topic=document.querySelector('.ele-fa li #topic')
  pop.addEventListener("click",function (e){
      e.preventDefault()
    document.documentElement.scrollTop=1025
  })
  window.addEventListener('scroll',function (){
    const n=document.documentElement.scrollTop
    if (n<1025){
      pop.classList.remove('AddColor')
      brand.classList.remove('AddColor')
      topic.classList.remove('AddColor')
    }
    if (n>=1025&&n<1560){
      pop.classList.add('AddColor')
      brand.classList.remove('AddColor')
      topic.classList.remove('AddColor')
    }
    if (1560<=n&&n<2000){
      pop.classList.remove('AddColor')
      brand.classList.add('AddColor')
      topic.classList.remove('AddColor')
    }
    if(n>=2000){
      brand.classList.remove('AddColor')
      topic.classList.add('AddColor')
      pop.classList.remove('AddColor')
    }

  })
  brand.addEventListener("click",function (e){
    e.preventDefault()
    document.documentElement.scrollTop=1560
  })
  topic.addEventListener("click",function (e){
    e.preventDefault()
    document.documentElement.scrollTop=2000
  })
  const elevator=document.querySelector('.ele-fa')
  window.addEventListener('scroll',function (){
    const n=document.documentElement.scrollTop
    if (n>=350){
      elevator.style.position='fixed'
    }
    else {
      elevator.style.position='static'
    }
  })
    window.addEventListener('scroll',function (){
      const n=document.documentElement.scrollTop
      const headertop=document.querySelector('.header-top')
      if (n>=680){
        headertop.style.top='0'
      }
      if (n<680) {
        headertop.style.top='-80px'
      }
    })
    const input=document.querySelector('.mi input')
    input.addEventListener('focus',function (){
      document.querySelector('.result-list').style.display='block'
      input.classList.add('search')
    })
    input.addEventListener('blur',function (){
      document.querySelector('.result-list').style.display='none'
      input.classList.remove('search')
    })

    // 轮播图
    const picData = [
      { url: 'img/轮播图.jpg' },
      { url: 'img/lunbo123.jpg'},
      { url: 'img/lunbo5.jpg'},
      { url: 'img/轮播图5.jpg'},
      { url: 'img/轮播图二.jpg'},
    ]
    const img=document.querySelector('.banner .wrapper img')
    const li=document.querySelectorAll('.banner ol li')
    const prv=document.querySelector('.pr-fa .prev')
    const nex=document.querySelector('.ne-fa .next')
    let i=0
    nex.addEventListener('click',function (){
      i++
      document.querySelector('.banner ol .current').classList.remove('current')
      document.querySelector(`.banner ol li:nth-child(${i+1})`).classList.add('current')
      img.src=picData[i].url
      if (i===picData.length-1){
        i=-1
      }
    })
  prv.addEventListener('click',function (){
    i--
    if (i<0){
      i=picData.length-1
    }
    document.querySelector('.banner ol .current').classList.remove('current')
    document.querySelector(`.banner ol li:nth-child(${i+1})`).classList.add('current')
    img.src=picData[i].url
  })
    let timer=setInterval(function (){
      nex.click()
    },1500)
    const big=document.querySelector('.banner')
    big.addEventListener('mouseenter',function (){
      clearInterval(timer)
    })
    big.onmouseleave = function () {
    timer = setInterval(function () {
      nex.click()
    }, 1500)
  }
  for (let j = 0; j <5 ; j++) {
    li[j].setAttribute("data-index", j)
    li[j].onclick = function () {
      console.log(this.getAttribute("data-index"))
      i = this.getAttribute("data-index")
      for (let a = 0; a<5; a++) {
        li[a].classList.remove("current")
      }
      li[i].classList.add("current")
      for (let k = 0; k <5; k++) {
        li[k].classList.remove("current")
      }
      li[i].classList.add("current")
      img.src=picData[i].url
    }
  }
  function getCountTime() {
    // 1. 得到当前的时间戳
    const now = +new Date()
    // 2. 得到将来的时间戳
    const last = +new Date('2023-5-30 18:30:00')
    // console.log(now, last)
    // 3. 得到剩余的时间戳 count  记得转换为 秒数
    const count = (last - now) / 1000
    // console.log(count)
    // 4. 转换为时分秒
    // h = parseInt(总秒数 / 60 / 60 % 24)   //   计算小时
    // m = parseInt(总秒数 / 60 % 60);     //   计算分数
    // s = parseInt(总秒数 % 60);
    // let d = parseInt(count / 60 / 60 / 24)               //   计算当前秒数
    let h = parseInt(count / 60 / 60 % 24)
    h = h < 10 ? '0' + h : h
    let m = parseInt(count / 60 % 60)
    m = m < 10 ? '0' + m : m
    let s = parseInt(count % 60)
    s = s < 10 ? '0' + s : s

    //  5. 把时分秒写到对应的盒子里面
    document.querySelector('#hour').innerHTML = h+'时'
    document.querySelector('#minutes').innerHTML = m+'分'
    document.querySelector('#second').innerHTML = s+'秒'
  }
  // 先调用一次
  getCountTime()

  // 开启定时器
  setInterval(getCountTime, 1000)
  const FirstLi=document.querySelector('.shortcut ul li:nth-child(1)')
  const SecondLi=FirstLi.nextElementSibling
  function render(){
    const uname=JSON.parse(sessionStorage.getItem('YM'))
    if (uname){
      FirstLi.innerHTML=`<a href="javascript:;"><i class="iconfont"><img src="img/用户-角色-用户名-单人_jurassic.jpg" alt="" height="30">${uname.name}</i></a>`
      SecondLi.innerHTML=`<a href="javascript:;">退出登录</a>`
    }
      else{
        FirstLi.innerHTML=`<a href="登录login.html">您好！请先登录</a>`
        SecondLi.innerHTML=`<a href="注册导航.html">免费注册</a>`

      }
  }
render()
  SecondLi.addEventListener('click',function (){
    sessionStorage.removeItem('YM')
    render()
  })
  const ShopCar=document.querySelector('.wrapper li:nth-child(4) a')
  ShopCar.addEventListener('click',function (e){
    e.preventDefault()
    const uname=JSON.parse(sessionStorage.getItem('YM'))
    if (!uname){
      alert('请先登录！')
    }
    else {
      window.location.href="ShopCar.html"
    }

  })
  const homepage=document.querySelector('.wrapper li:nth-child(6) a')
  homepage.addEventListener('click',function (e){
    e.preventDefault()
    const uname=JSON.parse(sessionStorage.getItem('YM'))
    if (!uname){
      alert('请先登录！')
    }
    else {
      window.location.href="ShopCar.html"
    }
  })

</script>
</body>
</html>